<style>
.groupCompany {
  padding: 10px;
  min-height: 600px;
}
.smoke-top-title {
  margin-bottom: 10px;
  margin-left: 4px;
}
.smoke-count-item {
  border: 1px solid #666;
  border-radius: 5px;
  max-width: 200px;
  padding: 15px 0 10px;
  margin-right: 1.5vw;
  text-align: center;
  cursor: pointer;
}
.smoke-count-item > .smoke-p-title {
  font-size: 22px;
  line-height: 1;
}
.smoke-count-item > .smoke-p-desc {
  margin-top: 10px;
  font-size: 12px;
  color: #666;
}
.color-red {
  color: #e44e1d;
  border-color: #e44e1d;
}
.color-gold {
  color: #dbd148;
  border-color: #dbd148;
}
.color-orange {
  color: #eba035;
  border-color: #eba035;
}
.color-blue {
  color: #3089ff;
  border-color: #3089ff;
}
</style>

<template>
  <div class="manage-wrap">
    <div class="operation-panel">
      <Form ref="searchForm"
            :model="searchForm"
            value="true"
            inline>
        <Row>
          <Form-item>
            <Input v-model="searchForm.imei"
                   placeholder="IMEI"></Input>
          </Form-item>
          <Select v-model="searchForm.dataType"
                  clearable
                  style="width:200px">
            <Option value="心跳">心跳</Option>
            <Option value="自检">自检</Option>
            <Option value="电池电量">电池电量</Option>
            <Option value="信号强度(dBm)">信号强度(dBm)</Option>
            <Option value="信噪比(dB)">信噪比(dB)</Option>
            <Option value="信号覆盖等级(dB)">信号覆盖等级(dB)</Option>
            <Option value="RSSI场强值">RSSI场强值</Option>
            <Option value="污染程度">污染程度</Option>
            <Option value="烟雾浓度">烟雾浓度</Option>
          </Select>
          <Button type="primary"
                  icon="ios-search"
                  @click="doSearchTableList">搜 索</Button>
          <Button type="warning"
                  icon="ios-color-wand"
                  @click="resetSearch">重置</Button>
        </Row>
      </Form>
    </div>
    <!--table-->
    <Row>
      <Table stripe
             size="small"
             :columns="tableColums"
             :data="tableData"
             :loading="tableLoading"></Table>
    </Row>
    <Row>
      <Page :total="total"
            :page-size="currentPageSize"
            :current="currentPage"
            @on-change="changeCurrentPage"
            @on-page-size-change="changePageSize"
            show-total
            show-sizer
            style="float:right;margin-top:10px"></Page>
    </Row>
  </div>
</template>

<script>
import { getHeartBeatPagedList } from '@/api/monitor'
export default {
  name: 'heart-beat',
  data() {
    return {
      tableColums: [
        {
          minWidth: 60,
          type: 'index',
          title: '序号',
          align: 'center'
        },
        {
          minWidth: 140,
          align: 'center',
          title: '设备名称',
          key: 'devName'
        },
        {
          minWidth: 140,
          align: 'center',
          title: '设备型号',
          key: 'devModel'
        },
        {
          minWidth: 140,
          align: 'center',
          title: 'IMEI',
          key: 'imei'
        },
        {
          minWidth: 140,
          align: 'center',
          title: 'ICCID',
          key: 'iccid'
        },
        {
          minWidth: 140,
          align: 'center',
          title: '数据类型',
          key: 'dataType',
          render: (h, params) => {
            const row = params.row
            if (row.dataType) {
              return h(
                'Tag',
                {
                  props: {
                    type: 'border',
                    color: this.dataTypeColor(row.dataType)
                  }
                },
                row.dataType
              )
            }
          }
        },
        {
          minWidth: 140,
          align: 'center',
          title: '数据详情',
          key: 'dataDetail',
          render: (h, params) => {
            const row = params.row
            return h(
              'span',
              {
                style: {
                  color: this.dataTypeColor(row.dataType)
                }
              },
              this.dataDetailFormat(row.dataType, row.dataDetail)
            )
          }
        },
        {
          minWidth: 140,
          align: 'center',
          title: '心跳',
          key: 'heartbeat'
        },
        {
          minWidth: 140,
          align: 'center',
          title: '自检类型',
          key: 'selfCheck'
        },
        {
          align: 'center',
          minWidth: 100,
          title: '信噪比(dB)',
          key: 'signalSnr'
        },
        {
          align: 'center',
          minWidth: 140,
          title: '信号覆盖等级(dB)',
          key: 'signalEcl'
        },
        {
          align: 'center',
          minWidth: 120,
          title: '信号强度(dBm)',
          key: 'signalStrength'
        },
        {
          align: 'center',
          minWidth: 100,
          title: '电池电量',
          key: 'batteryPower',
          render: (h, params) => {
            const row = params.row
            return h('span', row.batteryPower ? row.batteryPower + '%' : '')
          }
        },
        {
          align: 'center',
          minWidth: 120,
          title: 'RSSI场强值',
          key: 'rssi'
        },
        {
          align: 'center',
          minWidth: 100,
          title: '污染程度',
          key: 'dirtyPercent',
          render: (h, params) => {
            let dirtyPercent = params.row.dirtyPercent
            let dirtyPercentName = ''
            if (dirtyPercent == null) {
              dirtyPercentName = ''
            } else if (dirtyPercent < 11) {
              dirtyPercentName = dirtyPercent + '% 无污染'
            } else if (dirtyPercent < 31) {
              dirtyPercentName = dirtyPercent + '% 轻度污染'
            } else if (dirtyPercent < 61) {
              dirtyPercentName = dirtyPercent + '% 中度污染'
            } else {
              dirtyPercentName = dirtyPercent + '% 重度污染'
            }
            return h('span', dirtyPercentName)
          }
        },
        {
          align: 'center',
          minWidth: 100,
          title: '烟雾浓度',
          key: 'smokeScope',
          render: (h, params) => {
            let smokeScope = params.row.smokeScope
            let smokeScopeName = ''
            if (smokeScope == null) {
              smokeScopeName = ''
            } else if (smokeScope < 31) {
              smokeScopeName = smokeScope + '% 无烟'
            } else if (smokeScope < 71) {
              smokeScopeName = smokeScope + '% 低烟'
            } else if (smokeScope < 100) {
              smokeScopeName = smokeScope + '% 中烟'
            } else {
              smokeScopeName = smokeScope + '% 浓烟'
            }
            return h('span', smokeScopeName)
          }
        },
        {
          minWidth: 100,
          align: 'center',
          title: '在线状态',
          key: 'online'
        },
        {
          minWidth: 140,
          align: 'center',
          title: '复位',
          key: 'reset'
        },
        {
          minWidth: 200,
          align: 'center',
          title: '数据时间',
          key: 'dataTime'
        }
      ],
      tableData: [],
      total: 0,
      currentPage: 1,
      currentPageSize: 20,
      delModal: false,
      delId: '', //删除的Id
      btnLoading: false,
      searchForm: {
        dataType: '',
        imei: '',
        size: 20,
        current: 1
      },
      tableLoading: false
    }
  },
  created() {},
  mounted() {
    this.getTableList()
  },
  methods: {
    resetSearch() {
      this.searchForm.imei = ''
      this.searchForm.dataType = ''
    },
    doSearchTableList() {
      this.currentPage = 1
      this.getTableList()
    },
    async getTableList() {
      this.tableLoading = true
      this.searchForm.current = this.currentPage
      this.searchForm.size = this.currentPageSize
      const params = this.searchForm
      const result = await getHeartBeatPagedList(params)

      if (result.code == 0) {
        let res = result.data
        this.total = res.total
        this.tableData = res.records
      }
      this.tableLoading = false
    },
    changeCurrentPage(num) {
      this.currentPage = num
      this.getTableList()
    },
    changePageSize(pageSize) {
      this.currentPageSize = pageSize
      this.getTableList()
    },
    dataTypeColor(dataType) {
      let colorList = [
        '#19be6b',
        '#1dc9b7',
        '#ffb822',
        '#2786fb',
        '#5867dd',
        '#fd27eb',
        '#6610f2',
        '#6f42c1',
        '#e83e8c',
        '#dc3545',
        '#fd7e14',
        '#ffc107',
        '#28a745',
        '#20c997',
        '#17a2b8',
        '#e1e1ef',
        '#007bff'
      ]
      let color = colorList[10]
      switch (dataType) {
        case '心跳':
          color = colorList[0]
          break
        case '自检':
          color = colorList[1]
          break
        case '电池电量':
          color = colorList[2]
          break
        case '信号强度(dBm)':
          color = colorList[3]
          break
        case '信噪比(dB)':
          color = colorList[4]
          break
        case '信号覆盖等级(dB)':
          color = colorList[5]
          break
        case 'RSSI场强值':
          color = colorList[6]
          break
        case '污染程度':
          color = colorList[7]
          break
        case '烟雾浓度':
          color = colorList[8]
          break

        default:
          color = colorList[10]
      }
      return color
    },
    dataDetailFormat(dataType, dataDetail) {
      let detail = ''
      switch (dataType) {
        case '心跳':
          detail = dataDetail
          break
        case '自检':
          detail = dataDetail
          break
        case '电池电量':
          detail = dataDetail + '%'
          break
        case '信号强度(dBm)':
          detail = dataDetail
          break
        case '信噪比(dB)':
          detail = dataDetail
          break
        case '信号覆盖等级(dB)':
          detail = dataDetail
          break
        case 'RSSI场强值':
          detail = dataDetail
          break
        case '污染程度':
          if (dataDetail < 11) {
            detail = dataDetail + '% 无污染'
          } else if (dataDetail < 31) {
            detail = dataDetail + '% 轻度污染'
          } else if (dataDetail < 61) {
            detail = dataDetail + '% 中度污染'
          } else {
            detail = dataDetail + '% 重度污染'
          }
          break
        case '烟雾浓度':
          if (dataDetail < 31) {
            detail = dataDetail + '% 无烟'
          } else if (dataDetail < 71) {
            detail = dataDetail + '% 低烟'
          } else if (dataDetail < 100) {
            detail = dataDetail + '% 中烟'
          } else {
            detail = dataDetail + '% 浓烟'
          }
          break

        default:
          detail = dataDetail
      }
      return detail
    }
  }
}
</script>
